<template>
    <div>
        <el-row class="tac">
            <el-col :span="24">
                <!-- router el-menu的属性 可以开启路由跳转 以index作为url -->
                <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
                    active-text-color="#ffd04b" router>
                    <el-submenu v-for="(menu, index) in menuList" :key="index" :index="index + '1'">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>{{ menu.title }}</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item v-for="(subMenu, num) in menu.children" :key="num + 'sub'"
                                :index="subMenu.url">
                                {{ subMenu.title }}</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    data() {
        return {
            menuList: []
        }
    },
    created() {
        //调用函数
        console.log(this.$store.getters.menuList);//用vuex中的数据 就不用在发请求了
        this.getMenuList()
    },
    methods: {
        getMenuList() {
            ///menulist?istree=1让结构更清晰
            this.$http('/menulist', {
                params: {
                    istree: 1
                }
            }).then(res => {
                // console.log(res);
                this.menuList = res.list
            })
        }
    }
}
</script>

<style>

</style>